<template>
	<view class="page">
		<topVue title="账号切换"></topVue>
		<view class="rightClick flex align-center" @click="isTrash=!isTrash" style="width: 92rpx;" v-if="list.length>0">
			<text style="color: #1CC289; font-weight: 600;">{{ isTrash ? "取消" : "管理" }}</text>
		</view>
		<view class="box margin20">
			<scroll-view class="scrollVue" scroll-y="true">
				<view class="li flex align-center padding-row30" v-for="(item, index) in list" :key="index" @click="userId=item.id">
					<u-avatar :src="item.avatar ? item.avatar : '1'" size="80"></u-avatar>
					<view class="flex-1 flex-between align-center">
						<view class="flex-column" style="padding-left: 20rpx;">
							<text style="line-height: 1; color: #333; font-weight: 600; font-size: 30rpx;">{{ item.mobile | conceal() }}</text>
							<u-gap height="20"></u-gap>
							<text style="line-height: 1; color: #81868e;">ID: {{ item.id }}</text>
						</view>
						
						<image src="../../static/selected.png" style="width: 40rpx; height: 40rpx;" v-if="userId==item.id"></image>
						<image src="../../static/select.png" style="width: 40rpx; height: 40rpx;" v-else></image>
					</view>
				</view>
				<view class="li flex align-center padding-row30" @click="show=true">
					<u-avatar src="../../static/add.png" size="80"></u-avatar>
					<text style="line-height: 1; padding-left: 20rpx;color: #1CC289; font-weight: 600;">添加新账号</text>
				</view>
				<!-- <view class="btn delete margin50" v-if="isTrash && list.length>0" @click="deleteFun()">删除账号</view>
				<view class="btn margin50" v-if="!isTrash && list.length>0" @click="switchFun()">切换选中账号</view>	 -->			
			</scroll-view>
		</view>
		
		<view class="botVue relative margin10">
			<div class="btn absolute-auto" style="background: #d81e06;" v-if="isTrash" @click="isDelete=true">删除</div>
			<div class="btn absolute-auto" v-else @click="confirm">切换账号</div>
		</view>
		
		<popup :show="isDelete" text="确认删除该账号?" @cancel="isDelete=false" @confirm="deleteFun"></popup>
		
		<popup :show="isConfirm" text="确认由当前账号切换至该账号?" @cancel="isConfirm=false" @confirm="switchFun"></popup>
		
		<!-- 添加账号 -->
		<u-popup v-model="show" mode="center" border-radius="15">
			<view class="popVue padding30">
				<view class="title">添加账号</view>
				<view class="inpVue margin40 flex align-center padding-row30">
					<image src="../../static/user.png" style="width: 44rpx; height: 44rpx;"></image>
					<input type="text" placeholder="手机号" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="phone"/>
				</view>
				<view class="inpVue margin30 flex align-center padding-row30 relative" v-if="isPwd">
					<image src="../../static/code.png" style="width: 44rpx; height: 44rpx;"></image>
					<input type="password" placeholder="输入登录密码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="pwd"/>
				</view>
				<view class="inpVue margin30 flex align-center padding-row30 relative" v-else>
					<image src="../../static/code.png" style="width: 44rpx; height: 44rpx;"></image>
					<input type="number" placeholder="输入验证码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="code"/>
					<view class="code absolute" @click="sendFun()">{{ text }}</view>
				</view>
				<view class="margin50 text-center" style="color: #1CC289; line-height: 1; font-weight: 600;" @click="isPwd=!isPwd">{{ isPwd ? "使用验证码添加" : "使用密码添加" }}</view>
				<view class="loginBtn margin40" @click="addByPwd()" v-if="isPwd">添加</view>
				<view class="loginBtn margin40" @click="addByCode()" v-else>添加</view>
			</view>
		</u-popup>
		
		<Loading :num="2" v-if="loading"></Loading>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				isTrash: false,
				userId: "",
				list: [],
				show: false,
				phone: "",
				pwd: "",
				isPwd: true,
				deviceId: "",
				isSend: false,
				code: "",
				text: "获取验证码",
				loading: false,
				isDelete: false,
				isConfirm: false,
			}
		},
		computed: {
			...mapState({
				user: state => state.user
			})
		},
		mounted(){
			this.userId = this.user.id
		},
		async onShow() {
			await this.getAccounts()
		},
		methods: {
			async getAccounts(){
				const res = await this.$request("/app-api/member/user/getList", "GET", {
					deviceId: uni.getStorageSync("deviceId")
				})
				if(res.code===0) {
					this.list = res.data
					console.log("该设备登录的账号",this.list)
				}	
			},
			
			// 删除账号
			async deleteFun(){
				if(!this.userId) return this.$u.toast("请选择要删除的账号")
				const res = await this.$request("/app-api/member/user/account", "DELETE", {
					userId: this.userId
				}, "application/x-www-form-urlencoded")
				if(res.code===0) {
					console.log(res)
					this.isDelete = false
					this.$u.toast("删除成功")
					this.isTrash = false
					this.getAccounts()
				}else{
					this.$u.toast(res.msg)
				}
			},
			
			async addByCode(){
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				if(!this.$u.test.code(this.code, 4)) return this.$u.toast("请输入正确验证码")
				this.loading = true
				const result = await this.$request("/app-api/member/auth/sms-login", "POST", {
					mobile: this.phone,
					code: this.code,
					inviteCode: "",
					deviceId: uni.getStorageSync("deviceId")
				})
				this.loading = false
				if(result.code===0) {
					this.show = false
					this.$u.toast("添加成功")
					this.getAccounts()
					this.phone = ""
					this.code = ""
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			async addByPwd(){
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				this.loading = true
				const result = await this.$request("/app-api/member/auth/login", "POST", {
					mobile: this.phone,
					password: this.pwd,
					inviteCode: "",
					deviceId: uni.getStorageSync("deviceId")
				})
				this.loading = false
				if(result.code===0) {
					this.show = false
					this.$u.toast("添加成功")
					this.getAccounts()
					this.phone = ""
					this.pwd = ""
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			// 发送验证码
			async sendFun(){
				if(this.isSend) return
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				this.loading = true
				this.isSend = true;
				const result = await this.$request("/app-api/member/auth/send-sms-code", "POST", {
					mobile: this.phone,
					scene: 1
				})
				this.loading = false
				if(result.code===0) {
					this.$u.toast("验证码已发送")
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = '获取验证码';
							this.isSend = false;
						}
					}, 1000);
				}else{
					this.isSend = false;
					this.$u.toast(result.msg)
				}
			},
			
			confirm(){
				if(this.user.id==this.userId) return this.$u.toast("该账号为当前登录账号")
				this.isConfirm = true
			},
			
			// 切换账号
			async switchFun(){
				if(!this.userId) return this.$u.toast("请选择登录账号")
				const result = await this.$request("/app-api/member/auth/change", "GET",{
					userId: this.userId
				})
				if(result.code===0) {
					this.isConfirm = false
					uni.setStorageSync("token", result.data.refreshToken)
					this.$u.toast("登录成功")
					this.$store.state.isLogin = true
					setTimeout(()=>{
						this.$store.dispatch("getUser")
						uni.switchTab({
							url: "/pages/index/index"
						})
					}, 1000)
				}else{
					this.$u.toast(result.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.popVue {
		width: 690rpx;
		.title {
			font-weight: 600;
			color: #333;
			text-align: center;
			font-size: 32rpx;
		}
		.loginBtn {
			width: 100%;
			height: 92rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			border-radius: 15rpx;
			line-height: 92rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: 600;
		}
		.inpVue {
			width: 100%;
			height: 88rpx;
			background: #F3F4F6;
			border-radius: 16rpx;
			input {
				flex: 1;
				height: 88rpx;
				color: #333;
				font-size: 28rpx;
				padding-left: 20rpx;
			}
			.loginType {
				color: #1CC289;
			}
			.code {
				width: 200rpx;
				height: 88rpx;
				background: linear-gradient(to right, #1CC289, #60A5FA);
				top: 0;
				right: 0;
				border-radius: 0 16rpx 16rpx 0;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
			}	
		}
	}
	
	.botVue {
		width: 100%;
		height: 120rpx;
		.btn {
			width: 630rpx;
			height: 92rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			border-radius: 15rpx;
			line-height: 92rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: 600;
		}
	}

	.box {
		width: 690rpx;
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.scrollVue {
			width: 100%;
			height: calc(100vh - var(--status-bar-height) - 92rpx - 150rpx);
			.li {
				width: 100%;
				height: 140rpx;
				border-bottom: 1rpx solid #f5f5f5;
			}
			.btn {
				width: 630rpx;
				height: 92rpx;
				background: linear-gradient(to right, #1CC289, #60A5FA);
				border-radius: 15rpx;
				line-height: 92rpx;
				text-align: center;
				color: #fff;
				font-size: 30rpx;
				font-weight: 600;
			}
			.delete {
				background: #d81e06;
			}
		}		
	}
</style>